<template>
    <div class="login-container">
        <el-card class="login-card">
            <template #header>
                <div class="card-header">
                  <el-icon class="custom-icon"><ElementPlus /></el-icon>
                  <h2>Sign In</h2>
                </div>
            </template>
            <el-form :model="loginForm" :rules="rules" ref="loginFormRef" @keyup.enter="submitForm">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" class="form-item-gap" placeholder="请输入用户名" prefix-icon="User" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" class="form-item-gap" type="password" placeholder="请输入密码" prefix-icon="Lock"
                        show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="form-item-gap"  @click="submitForm" :loading="loading" style="width: 260px;">
                        登 录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useAuthStore } from '@/store/auth';
import { login as apiLogin } from '@/api/authApi';
import { ElementPlus } from '@element-plus/icons-vue'
const router = useRouter();
const authStore = useAuthStore();

const loginFormRef = ref(null);
const loading = ref(false);

const loginForm = reactive({
    username: '',
    password: '',
});

const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
};

const submitForm = async () => {
    if (!loginFormRef.value) return;
    await loginFormRef.value.validate(async (valid) => {
        if (valid) {
            loading.value = true;
            try {
                const response = await apiLogin(loginForm);
                authStore.login(response.data); // 使用 store 保存用户信息
                ElMessage.success('登录成功！');
                router.push('/'); // 登录成功后跳转到首页
            } catch (error) {
                const message = error.response?.data || '登录失败，请检查您的凭据';
                ElMessage.error(message);
            } finally {
                loading.value = false;
            }
        }
    });
};
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url('https://q4.itc.cn/q_70/images03/20240107/2126dcfd7cbb40e6aff891cbfa9ccfbd.jpeg')
    no-repeat center center;
    background-size: cover;
  position: relative;
}

.login-card {
    width: 350px;
    border-radius: 15px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20); /* 更深阴影 */
    backdrop-filter: blur(6px);        /* 玻璃态 */
  background-color: rgba(255, 255, 255, 0.7);

}
/* 头部图标 + 标题 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  text-align: center;
  font-size: 20px;
  padding: -10px 0;

}
.card-header h2 {
  margin: 0 0 0 8px;
  font-size: 24px;
  color: #303133;
}
.custom-icon {
  font-size: 32px;
  color: #409eff;
}.form-item-gap {
   width: 260px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 16px;

 }
</style>